<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="flexible.min.js">
    </script>
</head>

<body>
    <img id="car" src="img/cars.jpg" style="display: none;" style="width: 64px;height: 64px;" />

    <div style="text-align: center;">
        <canvas id="myCanvas" width="600px" height="300px">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
    </div>


    <script>
        var cas = document.getElementById("myCanvas");
        var ctx = cas.getContext("2d");
        var img = document.getElementById("car");


        // 用于判断是否有RedDot
        var last_red_dot = -1;

        // 起始 XY
        var _x = 45;
        var _y = 50;

        // 空格间距
        var cut_point = 60;
        var v_cut_point = 100;

        var steps = [
            [_x, _y],
            [_x + v_cut_point, _y],
            [_x + v_cut_point * 2, _y],
            [_x + v_cut_point * 3, _y],
            [_x + v_cut_point * 4, _y],
            [_x + v_cut_point * 5, _y],
            [_x + v_cut_point * 5, _y + cut_point],
            [_x + v_cut_point * 5, _y + cut_point * 2],
            [_x + v_cut_point * 4, _y + cut_point * 2],
            [_x + v_cut_point * 3, _y + cut_point * 2],
            [_x + v_cut_point * 2, _y + cut_point * 2],
            [_x + v_cut_point * 1, _y + cut_point * 2],
            [_x, _y + cut_point * 2],
            [_x, _y + cut_point * 3],
            [_x, _y + cut_point * 4],
            [_x + v_cut_point * 1, _y + cut_point * 4],
            [_x + v_cut_point * 2, _y + cut_point * 4],
            [_x + v_cut_point * 3, _y + cut_point * 4],
            [_x + v_cut_point * 4, _y + cut_point * 4],
            [_x + v_cut_point * 5, _y + cut_point * 4],
        ]


        this.onload = function () {
            // Draw On Load
            reDraw();
        }

        img.onload = function () {
            console.log('图片加载成功');
            console.log(this);
        }

        function changeStep(ks) {
            // Red Dot With a Car
            if (last_red_dot !== -1) {
                console.log("POINT");
                reDraw();
            }
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.drawImage(img, steps[ks][0] - 40, steps[ks][1] - 40);
            ctx.arc(steps[ks][0], steps[ks][1], 5, 0, Math.PI * 2, true);
            ctx.fill();
            last_red_dot = ks;
        }

        function reDraw() {
            ctx.fillStyle = "#FFF";
            ctx.clearRect(0, 0, cas.width, cas.height);
            // This is Lines
            ctx.shadowBlur = 0;
            ctx.beginPath();
            ctx.lineWidth = 3;
            ctx.lineCap = "butt";
            ctx.strokeStyle = "grey";
            ctx.moveTo(_x, _y);
            ctx.lineTo(_x + v_cut_point * 5, _y);
            ctx.lineTo(_x + v_cut_point * 5, _y + cut_point * 2);
            ctx.lineTo(_x, _y + cut_point * 2);
            ctx.lineTo(_x, _y + cut_point * 4);
            ctx.lineTo(_x + v_cut_point * 5, _y + cut_point * 4);
            ctx.stroke();

            // Set For Dot
            ctx.shadowBlur = 5;
            ctx.shadowColor = "black";
            ctx.fillStyle = "white";

            for (let index = 0; index < steps.length; index++) {
                var element = steps[index];
                ctx.beginPath();
                ctx.arc(element[0], element[1], 5, 0, Math.PI * 2, true);
                ctx.fill();
            }
        }


    </script>

</body>

</html>